<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
<!--    .layui-col-md6{-->
<!--        width:100%;-->
<!--    }-->
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space12">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>CSGO饰品统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space12">
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总库存</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_item">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总购入价</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_buy_price">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总现价</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_current_price">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总租金</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总租金收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="rent_interest">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_interest">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去7天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_7d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去14天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_14d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去30天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_30d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                            <div class="layui-card-body">
                                <div id="month-records" style="width: 100%;min-height:500px"></div>
                            </div>
                            <div class="layui-card-body">
                                <div id="interest-rate" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>

    var formObject1 = {};
    formObject1["type"]=5;
    var data_obj = JSON.stringify(formObject1);
    $.ajax({
        type : 'POST',
        url : "/api/csgostockrent",
        data : data_obj,
        dataType: "json",
        contentType:'application/json',
        async: false,
        success : function(result){
            if (result.success == "true"){
                for (var i in result.data){
                    ele_id="#"+i;
                    $(ele_id).append("<h1 class='no-margins'>"+result.data[i]+"</h1>");
                }
            }
        },error : function(result){
                console.log(result);
            }
    });
    layui.use(['layer','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
        /**
         * 日租金报表
         */
        var formObject = {};
        formObject["type"]=4;
        var data_obj = JSON.stringify(formObject);
        $.ajax({
            type : 'POST',
            url : "/api/csgostockrent",
            data : data_obj,
            dataType: "json",
            contentType:'application/json',
            async: false,
            success : function(result){
                if (result.success == "false") {
                }
                else if (result.exception == "true"){
                    alert("服务器异常");
                }
                else if (result.success == "true"){
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                    var rent_by_month = echarts.init(document.getElementById('month-records'), 'walden');
                    var interest_rate = echarts.init(document.getElementById('interest-rate'), 'walden')
                    var optionRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['租金','平均']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '租金',
                                type: 'line',
                                data: result.data["rent_by_date"],
                                smooth: true
                            },
                            {
                                name: '平均',
                                type: 'line',
                                data: result.data["avg_day"],
                                smooth: true
                            }
                        ]
                    };
                    var monthRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['租金','平均']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date_month"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '租金',
                                type: 'line',
                                data: result.data["rent_by_month"],
                                smooth: true
                            },
                            {
                                name: '平均',
                                type: 'line',
                                data: result.data["avg_month"],
                                smooth: true
                            }
                        ]
                    };
                    var interestRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['月年化(%)']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date_month"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '月年化(%)',
                                type: 'line',
                                data: result.data["interest_by_month"],
                                smooth: true
                            }
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                    rent_by_month.setOption(monthRecords);
                    interest_rate.setOption(interestRecords);
                    // echarts 窗口缩放自适应
                    window.onresize = function () {
                        echartsRecords.resize();
                        rent_by_month.resize();
                        interest_rate.resize();
                    }
                }
            },error : function(result){
                    console.log(result);
            }
        });
    });
</script>
